<template>
	<view class="page">
		<view class="hedaer">
			<view class="hedaer_left">
				<view class="icon" style="width: 44rpx;height: 44rpx;">
					<img src="@/static/ke_hu/fang.png" alt="" style="width: 100%;height: 100%;">
				</view>
				<view class="icon_right">
					<view class="tps">
						账号进件总计
					</view>
					<view class="icon_right_n">
						{{saleInstallmentNum || '0'}}
					</view>
				</view>
			</view>
			<view class="hedaer_left" style="background-color: #456EFE;">
				<view class="icon" style="width: 44rpx;height: 44rpx;">
					<img src="@/static/ke_hu/jian.png" alt="" style="width: 100%;height: 100%;">
				</view>
				<view class="icon_right">
					<view class="tps" style="color: #B7C6FF;">
						放款金额总计
					</view>
					<view class="icon_right_n">
						{{saleAmountSum || '0'}}元
					</view>
				</view>
			</view>
		</view>
		<view class="banner_right">
			<view class="banner_right_items" v-for="(t,i) in du" :key="i" :class="[duIndex == i ? 'jisn' : '']"
				@click="selecType(i)">
				{{t.title}}
			</view>
		</view>
		<!-- 		<div class="selectBox" @click=" show = true">
			<view class="selectBoxTitle">
				选择时间
			</view>
			<view class="date">
				<span class="dateTips">{{showDate(duIndex)}}</span>
				<u-calendar :show="show" @confirm='confirm' @close="close"></u-calendar>
				<u-icon name="arrow-down"></u-icon>
			</view>
		</div> -->
		<view class="jingxiaoshang">
			<view class="jingxiaoshang_title">
				订单数据
			</view>
			<view class="more" @click="jinxiaos">
				查看更多
			</view>
		</view>

		<view class="istyle" v-if="dataList.length > 0">
			<view class="items tow" v-for="data in dataList" @click="details(data.ID)">
				<view class="items_leftImg" style="margin-left: 22rpx;">
					<img src="@/static/ke_hu/shou.png" alt="" style="width: 100%;height: 100%;">
				</view>
				<view class="items_right" style="justify-content: flex-start;">
					<view class="items_right_t">
						<view class="s">
							<span>客户：{{data.name || ''}}</span>
						</view>
						<span style=" font-size: 20rpx;color: #9E9E9E;">{{data.createTime || ''}}</span>
					</view>
					<view class="items_right_b">
						<span style=" font-size: 20rpx;color: #9E9E9E;">订单状态：{{data.apply || ''}}</span>
					</view>
					<view class="items_right_b" @click.stop="$PhoneCall(data.phone)">
						<span>电话：{{data.phone || ''}}</span>
					</view>
					<view class="items_right_b">
						<span v-if="data.minPrice===data.maxPrice">官方指导价：{{data.minPrice ? `￥${data.minPrice}` : ''}}</span>
						<span v-else>官方指导价：{{data.minPrice ? `￥${data.minPrice}` : ''}} - {{data.maxPrice || ''}}</span>
						<!-- <span style="margin-left: 46rpx;">放款金额：￥2780</span> -->
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-else>
			<u-empty mode="data" text="暂无数据">
			</u-empty>
		</view>
		<!-- 		<u-button
			:customStyle="{border:'none',background: '#0079FE',width:'644rpx',color:'#fff',height:'90rpx',fontSize:'30rpx',borderRadius:'15rpx' ,marginTop:'81rpx',marginBottom: '122rpx'}"
			@click="addJian">
			新增进件
		</u-button> -->
	</view>
</template>

<script>
	export default {

		data() {
			return {
				type: 1,
				show: false,
				du: [{
					title: '全部'
				}, {
					title: '今日数据'
				}, {
					title: '月度数据'
				}],
				duIndex: 0,
				day: null,
				dataList: [],
				saleInstallmentNum: 0,
				saleAmountSum: 0,
			}
		},
		// onLoad() {
		// },
		created() {},
		methods: {
			load() {
				this.getDate()
				console.log('把请求接口方法放在这里面');
			},
			// 获取当前时间
			async getDate() {
				// let D = new Date() 
				// let year = (D.getFullYear() + '').padStart(2,'0')
				// let M = (D.getMonth() + 1 + '').padStart(2,'0')
				// let t = (D.getDate() + '').padStart(2,'0')
				// this.day = `${year}-${M}-${t}`
				// console.log(this.day,'11111111111');
				const res = await this.$post(`/biz/sale/homeInfo`, {
					saleId: uni.getStorageSync("clientUserId"),
					time: this.day,
					type: this.type
				})
				this.saleAmountSum = res.data.data.saleAmountSum
				this.saleInstallmentNum = res.data.data.saleInstallmentNum
				this.dataList = res.data.data.saleInstallments
			},
			changeBgc(val) {
				let bgc = ''
				if (val == 1) {
					bgc = 'chengSe'
				} else if (val == 2) {
					bgc = 'lvSe'
				} else if (val == 3) {
					bgc = 'hongSe'
				} else if (val == 4) {
					bgc = 'heiSe'
				} else if (val == 5) {
					bgc = 'ziSe'
				} else {
					// 默认色
					bgc = 'chengSe'
				}
				return bgc
			},
			confirm(e) {
				this.day = e[0]
				this.show = false
			},
			// 新增进件
			addJian() {

			},
			showDate(val) {
				let txt = ''
				if (val == 0) {
					txt = '全部数据'
				} else if (val == 1) {
					txt = '当天数据'
				} else if (val == 2) {
					txt = '当月数据'
				}
				return txt
			},
			selecType(index) {
				this.duIndex = index;
				if (index == 0) {
					this.type = 1
					this.day = ''
				} else if (index == 1) {
					this.type = 2
					let D = new Date()
					let year = D.getFullYear()
					let month = (D.getMonth() + 1 + '').padStart(2, '0')
					let nowday = (D.getDate() + '').padStart(2, '0')
					this.day = `${year}-${month}-${nowday}`
				} else if (index == 2) {
					this.type = 3
					let D = new Date()
					let year = D.getFullYear()
					let month = (D.getMonth() + 1 + '').padStart(2, '0')
					let nowday = (D.getDate() + '').padStart(2, '0')
					this.day = `${year}-${month}-${nowday}`
				}
				this.getDate()
			},
			xiaoshou() {
				uni.navigateTo({
					url: '/pages/zong_gong_si/shou_zhan_zhan_bi'
				})
			},
			jinxiaos() {
				uni.navigateTo({
					url: '/pages/xiao_shou_duan/wo_de_ding_dan'
				})
			},
			close() {
				this.show = false
			},
			details(id) {
				uni.navigateTo({
					url: '/pages/xiao_shou_duan/ding_dan_xiang_qing?id=' + id
				})
			}
		}
	}
</script>

<style>
	.page {
		overflow-y: auto;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.hedaer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 146rpx;
		margin-top: 24rpx;
	}

	.hedaer_left {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		width: 336rpx;
		height: 146rpx;
		background: #1CCD9D;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.icon {
		border-radius: 50%;
		background-color: #fff;
		margin: 15rpx 20rpx 0 15rpx;
	}

	.selectBox {
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50rpx;
		margin-top: 36rpx;

	}

	.icon_right {
		margin-top: 20rpx;
	}

	.tps {
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #BFFFEE;
	}

	.icon_right_n {
		height: 50rpx;
		font-size: 36rpx;
		font-family: 'PingFang SC-Medium, PingFang SC';
		font-weight: 500;
		color: #FFFFFF;
		line-height: 22rpx;
		margin-top: 10rpx;
	}

	.banner_right {
		padding: 0 11rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		height: 90rpx;
		background: #F2F2F2;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 32rpx;
	}

	.banner_right_items {
		text-align: center;
		width: 334rpx;
		height: 68rpx;

		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #202122;
		line-height: 68rpx;
	}

	.jisn {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 5rpx 1rpx rgba(0, 0, 0, 0.06);
		color: #5885F9;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 706rpx;
		height: 185rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 48rpx 1rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 26rpx auto 0;
		/* background-color: chocolate; */
	}

	.items_left {
		width: 99rpx;
		height: 99rpx;
		background: #F89751;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 26rpx 0 26rpx;
		font-size: 50rpx;
		font-family: 'FZZongYi-M05S-Regular, FZZongYi-M05S';
		font-weight: 400;
		color: #FFFFFF;
		line-height: 87rpx;
		text-align: center;
	}

	.items_right {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		width: 527rpx;
		height: 100%;
		/* background-color: red; */
	}

	.items_right_b {
		margin-top: 11rpx;
		height: 29rpx;
		font-size: 21rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #858585;
		line-height: 29rpx;
	}

	.items_right_t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 37rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #27292C;
		line-height: 37rpx
	}

	.chengSe {
		background-color: #F89751;
	}

	.lvSe {
		background-color: #31AB3F;
	}

	.hongSe {
		background-color: #FB5951;
	}

	.heiSe {
		background-color: #361B32;
	}

	.ziSe {
		background-color: #6947DE;
	}

	.items_leftImg {
		width: 79rpx;
		height: 79rpx;
		margin: 0 26rpx 0 26rpx;
	}

	.tow {
		align-items: flex-start;
		padding-top: 16rpx;
		box-sizing: border-box;
		width: 690rpx;
	}

	.selectBoxTitle {
		height: 42rpx;
		font-size: 30rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #535353;
		line-height: 42rpx;
	}

	.date {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.dateTips {
		height: 42rpx;
		font-size: 30rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #535353;
		line-height: 42rpx;
		margin-right: 28rpx;
	}

	.jingxiaoshang {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		height: 45rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin: 51rpx auto 18rpx;
	}

	.jingxiaoshang_title {
		font-size: 30rpx;
		font-family: ' PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #333333;
	}

	.more {
		height: 33rpx;
		font-size: 24rpx;
		font-family: ' PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #15499A;
	}

	.empty {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 300rpx;
	}
</style>